<template>
	<view class="add-student">
		<u-form labelPosition="left" :model="userInfo" labelWidth="240rpx" ref="form" :rules="rules">
			<view class="form-label-top margin-top-3">
				<u-form-item label="姓名" prop="name" borderBottom required>
					<view class="d-flex justify-space-between">
						<view>
							<u-input v-model="userInfo.name" placeholder="请输入姓名" border="none" 
								@input="fpNumInput" />

							<view style="margin-top: 36rpx;">
								<u-radio-group v-model="userInfo.sex" @change="groupChange">
									<u-radio label="男" :name="1" />
									<u-radio label="女" :name="2" customStyle="margin-left: 60rpx;" />
								</u-radio-group>
							</view>
						</view>
						<!-- <u-upload :fileList="fileList1" name="1" width="70" height="70" @afterRead="afterRead"
							@delete="deletePic" multiple :maxCount="1" /> -->
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1"></u-upload>
					</view>
				</u-form-item>
			</view>
			<view class="form-label-top margin-top-3">
				<!-- <u-form-item label="学员姓名" prop="userInfo.name" borderBottom ref="item1">
					<u-input placeholder="请输入姓名" v-model="userInfo.name" border="none"></u-input>
				</u-form-item>
				<u-form-item label="学员性别" prop="userInfo.sex" borderBottom ref="item1">
					<u-radio-group v-model="userInfo.sex">
						<u-radio label="男" :name="`男`" @select="sexSelect" />
						<u-radio label="女" :name="`女`" :customStyle="{ marginLeft: '60rpx' }" @select="sexSelect" />
					</u-radio-group>
				</u-form-item> -->
				<u-form-item label="手机号" prop="userInfo.phone" borderBottom ref="item1">
					<u-input placeholder="请输入手机号" v-model="userInfo.phone" border="none" type="number"></u-input>
				</u-form-item>
				<u-form-item label="监护人" prop="userInfo.custodian" borderBottom ref="item1" required>
					<u-input placeholder="请输入监护人名字" v-model="userInfo.custodian" border="none" @input="custodianInput"></u-input>
				</u-form-item>

				<u-form-item label="监护人手机号" prop="userInfo.custodian_mobile" borderBottom ref="item1" required>
					<u-input placeholder="请输入监护人手机号" v-model="userInfo.custodian_mobile" border="none"></u-input>
				</u-form-item>

				<u-form-item label="监护人关系" prop="custodian_relation" borderBottom required>
					<view @click="show = true" class="flex-between">
						<u-text :text="userInfo.custodian_relation" v-if="userInfo.custodian_relation" color="#303133">
						</u-text>
						<u-text text="请选择监护人关系" v-else color="#c0c4cc"></u-text>
						<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 30rpx;">
						</u-icon>
					</view>
					<u-picker :show="show" :columns="columns" keyName="label" @confirm="confirm" @cancel="show = false">
					</u-picker>
				</u-form-item>


				<!-- <u-form-item label="亲属关系" prop="kinship" borderBottom>
					<u-input v-model="userInfo.kinship" placeholder="请输入亲属关系" border="none" />
				</u-form-item> -->

				<!-- <u-form-item label="亲属关系" prop="kinship">
					<view @click="showKinshipPicker = true" class="flex-between">
						<u-text :text="userInfo.kinship" v-if="userInfo.kinship" color="#303133"></u-text>
						<u-text text="请选择亲属关系" v-else color="#c0c4cc"></u-text>
						<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 30rpx;">
						</u-icon>
					</view>
					<u-picker :show="showKinshipPicker" :columns="columnn.kinship"
						@confirm="confirmPicker($event, 'kinship')" @cancel="showKinshipPicker = false" />
				</u-form-item> -->


				<view class="group">
					<u-form-item label="监护人2" prop="userInfo.custodian_t" borderBottom ref="item1">
						<u-input placeholder="请输入监护人2名字" v-model="userInfo.custodian_t" border="none"></u-input>
					</u-form-item>

					<u-form-item label="监护人2手机号" prop="userInfo.custodian_t_mobile" borderBottom ref="item1">
						<u-input placeholder="请输入监护人2手机号" v-model="userInfo.custodian_t_mobile" border="none"></u-input>
					</u-form-item>

					<u-form-item label="监护人2关系" prop="custodian_t_relation" borderBottom>
						<view @click="custodian_show = true" class="flex-between">
							<u-text :text="userInfo.custodian_t_relation" v-if="userInfo.custodian_t_relation"
								color="#303133">
							</u-text>
							<u-text text="请选择监护人2关系" v-else color="#c0c4cc"></u-text>
							<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 30rpx;">
							</u-icon>
						</view>
						<u-picker :show="custodian_show" :columns="col_list" keyName="label" @confirm="custodian_list"
							@cancel="custodian_show = false">
						</u-picker>
					</u-form-item>

					<u-form-item label="身份证号" prop="id_card" borderBottom>
						<u-input v-model="userInfo.id_card" placeholder="请输入身份证号" border="none" type="number" />
					</u-form-item>
					<u-form-item label="婚姻状况" prop="marital_status" borderBottom>
						<view @click="showstatus = true" class="flex-between">
							<u-text :text="userInfo.marital_status" v-if="userInfo.marital_status" color="#303133">
							</u-text>
							<u-text text="请选择婚姻状况" v-else color="#c0c4cc"></u-text>
							<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 30rpx;">
							</u-icon>
						</view>
						<u-picker :show="showstatus" :columns="columns_status" keyName="label" @confirm="confirm_status"
							@cancel="showstatus = false">
						</u-picker>
					</u-form-item>
					<u-form-item label="生日" prop="birthday" borderBottom>
						<view @click="showBirthdayPicker = true" class="flex-between">
							<u-text :text="userInfo.birthday" v-if="userInfo.birthday" color="#303133"></u-text>
							<u-text text="请选择生日" v-else color="#c0c4cc"></u-text>
							<u-icon name="arrow-right" color="#BEBEBE" size="28rpx"></u-icon>
						</view>
						<u-datetime-picker v-model="defaultBirthday" :show="showBirthdayPicker" mode="date"
							:minDate="minDate" :maxDate="maxDate" @confirm="confirmBirthday"
							@cancel="showBirthdayPicker = false" />
					</u-form-item>
					<u-form-item label="城市" prop="occupation_relation" borderBottom>
						<view class="flex-between">
							<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
								<u-text :text="regionName" v-if="regionName" color="#303133"></u-text>
								<u-text text="请选择城市" v-else color="#c0c4cc"></u-text>
							</pick-regions>
							<u-icon name="arrow-right" color="#BEBEBE" size="28rpx"></u-icon>
						</view>
					</u-form-item>
					<u-form-item label="邮箱" prop="email" borderBottom>
						<u-input v-model="userInfo.email" placeholder="请输入邮箱" border="none" type="number" />
					</u-form-item>
					<u-form-item label="身高" prop="height" borderBottom>
						<u-input v-model="userInfo.height" placeholder="请输入身高" border="none" type="number" />
					</u-form-item>
					<u-form-item label="体重" prop="weight" borderBottom>
						<u-input v-model="userInfo.weight" placeholder="请输入体重" border="none" type="number" />
					</u-form-item>
					<u-form-item label="年龄" prop="age" borderBottom>
						<u-input v-model="userInfo.age" placeholder="请输入年龄" border="none" type="number" />
					</u-form-item>
					<!-- <u-form-item label="学校" prop="school" borderBottom>
						<u-input v-model="userInfo.school" placeholder="请输入学校" border="none" />
					</u-form-item>
					<u-form-item label="班级" prop="class_s" borderBottom>
						<u-input v-model="userInfo.class_s" placeholder="请输入班级" border="none" />
					</u-form-item> -->
					<u-form-item label="地址" prop="address" borderBottom>
						<u-input v-model="userInfo.address" placeholder="请输入地址" border="none" />
					</u-form-item>
					<u-form-item label="公司" prop="company" borderBottom>
						<u-input v-model="userInfo.company" placeholder="请输入公司" border="none" />
					</u-form-item>
					<u-form-item label="学校" prop="graduate" borderBottom>
						<u-input v-model="userInfo.graduate" placeholder="请输入学校" border="none" />
					</u-form-item>
					<u-form-item label="年级" prop="grade_name" borderBottom>
						<u-input v-model="userInfo.grade_name" placeholder="请输入年级" border="none" />
					</u-form-item>
					<u-form-item label="班级" prop="class_name" borderBottom>
						<u-input v-model="userInfo.class_name" placeholder="请输入班级" border="none" />
					</u-form-item>

					<u-form-item label="职业" prop="occupation_relation" borderBottom>
						<view @click="showoccupation = true" class="flex-between">
							<u-text :text="userInfo.occupation_relation" v-if="userInfo.occupation_relation"
								color="#303133">
							</u-text>
							<u-text text="请选择职业" v-else color="#c0c4cc"></u-text>
							<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 30rpx;">
							</u-icon>
						</view>
						<u-picker :show="showoccupation" :columns="occupation_status" keyName="label"
							@confirm="occupation_list" @cancel="showoccupation = false">
						</u-picker>
					</u-form-item>

				</view>
			</view>
		</u-form>

		<view class="bottom-add-btn">
			<u-button text="确认添加" shape="circle" @click="add"
				color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		formatDate
	} from "@/utils/util.js";
	const train = require("@/api/train/index.js");
	import pickRegions from '@/page_venues/components/pick-regions/pick-regions.vue'
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				showstatus: false, //婚姻状况
				show: false, //亲属关系
				showoccupation: false, //职业
				custodian_show: false, //监护人关系
				col_list: [], //监护人关系
				columns: [], //亲属关系
				columns_status: [], //婚姻状况
				occupation_status: [], //职业
				occupa: [],
				// sss: [ ],
				marital_s: [],

				showBirthdayPicker: false,
				formData: {},
				minDate: new Date(new Date().getFullYear() - 100, 0, 1).getTime(),
				maxDate: Date.now(),
				Default: new Date(new Date().getFullYear() - 20, 0, 1).getTime(),
				field: [],
				formStr: "",
				fileList1: [],
				rules: {
					// 'userInfo.name': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写姓名',
					// 	trigger: ['blur', 'change']
					// },
					// 'userInfo.sex': {
					// 	type: 'string',
					// 	max: 1,
					// 	required: true,
					// 	message: '请选择男或女',
					// 	trigger: ['blur', 'change']
					// },
				},

				userInfo: {
					name: '', //姓名
					sex: '', //性别
					custodian: '', //监护人
					birthday: '', //birthday
					phone: '', //电话号码
					gender: 1, //
					kinship: '', //
					height: '', //身高
					weight: '', //体重
					age: '', //年龄
					school: '', //毕业学校
					class_s: '', //班级
					avatar: '', //头像
					custodian_relation: '', //监护人关系
					custodian_relation_id: '', //监护人关系id
					address: '', //详细地址
					marital_status: '', //婚姻状况
					marital_s_id: '', //婚姻状况id
					company: '', //公司
					graduate: "", //毕业学校
					id_card: '', //身份证号
					occupation_relation: '', //职业
					occupation_relation_id: '', //职业id
					email: '', //邮箱
					province: '', //省份
					city: '', //城市
					area: '', //区/县
					custodian_mobile: "", //监护人手机号
					custodian_t_relation: "", //监护人2关系
					custodian_t: "", //监护人2名称
					custodian_t_mobile: "", //监护人2手机号
					custodian_t_relation_id: '' ,//监护人2名称id
					grade_name:'',//年级
					class_name:'',//班级
				},
				formData: {
					gender: 1
				},
				showBirthdayPicker: false,
				showBirthdayPicker: false,
				defaultBirthday: new Date(new Date().getFullYear() - 20, 0, 1).getTime(),
				url_phone: '',
				showKinshipPicker: false,
				columnn: {
					kinship: [
						// ['母亲','12','23'],
						// ["父亲", "母亲", "爷爷", "奶奶", "其他"],
						[{
								name: '父亲',
								id: '12'
							}

						]
					],
				},
				region: [],
				defaultRegion: [],
				defaultRegionCode: '440113',
				defaultRegionCode: '',

			};
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			}
		},
		onLoad(options) {
			this.conf()
			// this.field = JSON.parse(options.field);
			// let field = []
			// field.push(JSON.parse(decodeURIComponent(options.field)))
			// this.field = field;

		},
		methods: {
			fpNumInput(e) {
				console.log(e,'222')
				// const o = e.target;
				const inputRule =/[^\u4E00-\u9FA5]/g
				this.$nextTick(function() {
					this.userInfo.name = e.replace(inputRule, '');
					
				})
			},
			custodianInput(e) {
				console.log(e,'222')
				// const o = e.target;
				const inputRule =/[^\u4E00-\u9FA5]/g
				this.$nextTick(function() {
					this.userInfo.custodian = e.replace(inputRule, '');
					
				})
			},
			
			// 获取选择的地区
			handleGetRegion(region) {
				// let province = {}
				this.region = region
				this.userInfo.province = region[0].code
				this.userInfo.city = region[1].code
				this.userInfo.area = region[2].code
				region.forEach((item, index) => {
					// province[item.name] = item.code
				});
			},
			groupChange(n) {
				this.userInfo.sex = n
			},
			async conf() {
				let params = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let res = await train.conf(params);
				if (res.code == 1) {
					this.columns.push(
						res.data.list.custodian_relation_list
					)
					this.col_list.push(
						res.data.list.custodian_relation_list
					)
					this.columns_status.push(
						res.data.list.marital_status_list
					)
					this.occupation_status.push(
						res.data.list.occupation_list
					)
				}
			},
			// 亲属关系
			confirm(e) {
				this.userInfo.custodian_relation = e.value[0].label
				this.userInfo.custodian_relation_id = e.value[0].id
				this.show = false
			},
			custodian_list(e) {
				this.userInfo.custodian_t_relation = e.value[0].label
				this.userInfo.custodian_t_relation_id = e.value[0].id
				this.custodian_show = false
			},
			// 婚姻状况
			confirm_status(e) {
				this.userInfo.marital_status = e.value[0].label
				this.userInfo.marital_s_id = e.value[0].id
				this.showstatus = false
			},
			// 职业
			occupation_list(e) {
				this.userInfo.occupation_relation = e.value[0].label
				this.userInfo.occupation_relation_id = e.value[0].id
				this.showoccupation = false
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			confirmPicker({
				value
			}, key) {
				this.userInfo[key] = value.join('');
				this.userInfo.kinship = this.userInfo[key]

				// this.itemlist.forEach(item =>{
				// 	// itemArr.push(item.club_name)
				// 	console.log(item,'123')
				// 	if (this.userInfo.kinship == item.club_name) {
				// 		this.userInfo.kin_s = item.id
				// 			console.log(item.id,'12345')
				// 	} 
				// })
				this[`show${key[0].toUpperCase() + key.slice(1)}Picker`] = false;
			},
			confirmBirthday({
				value
			}) {
				this.userInfo.birthday = formatDate(value, 'YYYY-MM-DD');
				this.showBirthdayPicker = false;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: this.url_phone
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							// user: 'test',
							project_id: getApp().globalData.projectId,
							app_id: this.$https.weixinAppId,

						},
						success: (res) => {
							let result = JSON.parse(res.data);
							this.url_phone = result.data.url
							setTimeout(() => {
								resolve(this.url_phone)
							}, 1000)
						}
					});
				})
			},


			sexSelect(e) {
				console.log(e)
			},
			// confirmBirthday({ value }) {
			// 	this.formData.birthday = formatDate(value, 'YYYY-MM-DD');
			// 	this.showBirthdayPicker = false;
			// },
			async add() {
				let that = this
				if (this.userInfo.name == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
				} else if (this.url_phone == '') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					})
				} else if (this.userInfo.custodian == '') {
					uni.showToast({
						title: '请输入监护人',
						icon: 'none'
					})
				} else if (this.userInfo.custodian_relation == '') {
					uni.showToast({
						title: '请输入监护人关系',
						icon: 'none'
					})
				} else if (this.userInfo.custodian_mobile == '') {
					uni.showToast({
						title: '请输入监护人手机号',
						icon: 'none'
					})
				} else if (this.userInfo.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				} else {
					// this.formStr = "";
					// this.field.forEach((item, index) => {
					// 	this.formStr += item.name + "::" + item.remark + ";;";
					// });
					// console.log(this.formStr, '666')
					// this.formStr = this.formStr + '手机号' + "::" + this.userInfo.phone + ";;" + '姓名' + "::" + this
					// 	.userInfo.name + ";;" + '性别' + "::" + this.userInfo.sex + ";;" + '监护人' + "::" + this.userInfo
					// 	.custodian + ";;" + '生日' + "::" + this.userInfo.birthday + ";;" + '照片' + "::" + this.url_phone +
					// 	";;" + '亲属关系' + "::" + this.userInfo.kinship + ";;" + '身高' + "::" + this.userInfo.height +
					// 	";;" + '体重' + "::" + this.userInfo.weight + ";;" + '年龄' + "::" + this.userInfo.age + ";;" +
					// 	'学校' + "::" + this.userInfo.school + ";;" + '班级' + "::" + this.userInfo.class_s + ";;"
					// this.formStr = this.formStr.substring(0, this.formStr.lastIndexOf(";;"));
					// console.log(this.formStr, '5555')
					let formStr = {
						name: this.userInfo.name, //姓名
						sex: this.userInfo.sex, //性别
						age: this.userInfo.age, //年龄
						id_card: this.userInfo.id_card, //身份证号
						mobile: this.userInfo.phone, //电话号码
						height: this.userInfo.height, //身高
						weight: this.userInfo.weight, //体重
						email: this.userInfo.email, //邮箱
						province: this.userInfo.province, //省份
						city: this.userInfo.city, //城市
						area: this.userInfo.area, //区/县
						// street:'',街道
						address: this.userInfo.address, //详细地址
						head_img: this.url_phone, //头像
						custodian: this.userInfo.custodian, //监护人
						graduate: this.userInfo.graduate, //毕业学校
						occupation: this.userInfo.occupation_relation_id, //职业
						company: this.userInfo.company, //公司
						marital_status: this.userInfo.marital_s_id, //婚姻状况
						birthday: this.userInfo.birthday, //生日
						custodian_relation: this.userInfo.custodian_relation_id, //监护人关系
						custodian_mobile: this.userInfo.custodian_mobile, //监护人手机号
						custodian_t_relation: this.userInfo.custodian_t_relation_id, // 监护人2关系
						custodian_t: this.userInfo.custodian_t, //监护人2名称
						custodian_t_mobile: this.userInfo.custodian_t_mobile, //监护人2手机号
						grade_name:this.userInfo.grade_name, //年级
						class_name:this.userInfo.class_name, //班级
					}

					let postData = {
						student_info: formStr,
						openid: uni.getStorageSync('openid'),
						app_id: this.$https.weixinAppId,
						project_id: getApp().globalData.projectId,
					}
					let res = await train.addStudent(postData)
					if (res.code === 1) {
						// uni.navigateBack({
						// 	delta: 1
						// })
						uni.navigateTo({
							url: '../student-archives'
						})
					}
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.add-student {
		min-height: 100vh;
		background-color: #f6f6f6;
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));

		/deep/.u-form {
			.u-form-item {
				background-color: #fff;
			}

			.u-form-item__body {
				padding: 30rpx;
			}

			.group {
				margin-top: 20rpx;
			}

			.u-form-item__body__right__message {
				margin-left: 270rpx !important;
			}
		}
	}
</style>
